<template>
  <!--时间筛选器-->
  <div>
    <div :style="timeFilterStyle" @click="openModal(true, true)">
      <Icon
        icon="material-symbols:nest-clock-farsight-analog-outline"
        size="20"
        color="#305680"
        style="margin-right: 5px"
      />
      {{ timeFilterValue }}
    </div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="数据筛选"
      :helpMessage="['提示1', '提示2']"
      @ok="okClick"
    >
      <radioGroup v-model:value="radioValue" style="width: 100%">
        <Radio :style="radioStyle" :value="1">最后</Radio>
        <div v-if="radioValue === 1" :style="formItemStyle">
          <Select
            show-search
            style="width: 90%"
            v-if="switchFlag === false"
            v-model:value="finalSwitchSelectValue"
            :options="finalSelectList"
            :show-arrow="true"
            @change="getFinalSelectList"
          />
          <div v-if="switchFlag === true" :style="inputNumberBox">
            <div :style="inputNumberItem" v-for="(item, index) in inputNumberList" :key="index">
              <Input :value="item.title" :bordered="false" style="text-align: center" />
              <InputNumber
                v-model:value="item.time"
                :bordered="false"
                style="text-align: center"
                :min="0"
              />
            </div>
          </div>
          <div :style="switchStyle">
            <span>高级</span>
            <Switch v-model:checked="switchFlag" checked-children="√" size="small" />
          </div>
        </div>
        <Radio :style="radioStyle" :value="2">时间断</Radio>
        <div v-if="radioValue === 2" :style="dateTimePickerStyle">
          <div :style="dateTimePickerItemStyle">
            <DatePicker
              v-model:value="startDate"
              placeholder="开始日期"
              style="margin-right: 20px"
            />
            <TimePicker v-model:value="startTime" placeholder="开始时间" />
          </div>
          <div :style="dateTimePickerItemStyle">
            <DatePicker v-model:value="endData" placeholder="结束日期" style="margin-right: 20px" />
            <TimePicker v-model:value="endTime" placeholder="结束时间" />
          </div>
        </div>
        <Radio :style="radioStyle" :value="3">区间</Radio>
        <div v-if="radioValue === 3" :style="dateTimePickerStyle">
          <Select
            show-search
            style="width: 100%"
            v-model:value="intervalSwitchSelectValue"
            :options="intervalSelectList"
            :show-arrow="true"
          />
        </div>
      </radioGroup>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import {
    DatePicker,
    Input,
    InputNumber,
    Radio,
    RadioGroup,
    Select,
    Switch,
    TimePicker,
  } from 'ant-design-vue';
  import { onMounted, ref, watch } from 'vue';
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { SelectModal } from '/@/views/thingsborad/notification/components/data/notification.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import dayjs from 'dayjs';

  const { createMessage } = useMessage();
  const emits = defineEmits(['timeFilterValue']);
  const [register, { openModal, setModalProps, closeModal }] = useModal();
  onMounted(() => {
    setModalProps({
      okText: '更新',
    });
  });
  let startDate = ref<any>();
  let startTime = ref<any>();
  let endData = ref<any>();
  let endTime = ref<any>();
  let radioValue = ref<any>(1);
  let switchFlag = ref<boolean>(false);
  let finalSwitchSelectValue = ref<string>('1天');
  let intervalSwitchSelectValue = ref<string>('当前天');
  let timeFilterValue = ref<string>('最后一天');
  let inputNumberList = ref<any>([
    {
      title: '天',
      time: 0,
    },
    {
      title: '小时',
      time: 0,
    },
    {
      title: '分钟',
      time: 0,
    },
    {
      title: '秒',
      time: 0,
    },
  ]);
  const radioStyle = ref({
    display: 'block',
    height: '30px',
    lineHeight: '30px',
  });
  const finalSelectList: SelectModal[] = [
    { value: '1秒', label: '1秒' },
    { value: '5秒', label: '5秒' },
    { value: '10秒', label: '10秒' },
    { value: '15秒', label: '15秒' },
    { value: '30秒', label: '30秒' },
    { value: '1分', label: '1分' },
    { value: '2分', label: '2分' },
    { value: '5分', label: '5分' },
    { value: '10分', label: '10分' },
    { value: '15分', label: '15分' },
    { value: '30分', label: '30分' },
    { value: '1小时', label: '1小时' },
    { value: '2小时', label: '2小时' },
    { value: '5小时', label: '5小时' },
    { value: '10小时', label: '10小时' },
    { value: '12小时', label: '12小时' },
    { value: '1天', label: '1天' },
    { value: '7天', label: '7天' },
    { value: '30天', label: '30天' },
  ];
  const intervalSelectList: SelectModal[] = [
    { value: '昨天', label: '昨天' },
    { value: '前天', label: '前天' },
    { value: '前一周的这一天', label: '前一周的这一天' },
    { value: '前一周（周日至周六)', label: '前一周（周日至周六)' },
    { value: '前一周（周一至周日)', label: '前一周（周一至周日)' },
    { value: '前一个月', label: '前一个月' },
    { value: '上季度', label: '上季度' },
    { value: '前半年', label: '前半年' },
    { value: '前一年', label: '前一年' },
    { value: '当前小时', label: '当前小时' },
    { value: '当前天', label: '当前天' },
    { value: '当天到目前为止', label: '当天到目前为止' },
    { value: '本周（周日至周六)', label: '本周（周日至周六)' },
    { value: '本周（周一至周日)', label: '本周（周一至周日)' },
    { value: '本周到目前为止(周日至周六)', label: '本周到目前为止(周日至周六)' },
    { value: '本周到目前为止（周一至周日)', label: '本周到目前为止（周一至周日)' },
    { value: '本月', label: '本月' },
    { value: '本月到目前为止', label: '本月到目前为止' },
    { value: '当前季度', label: '当前季度' },
    { value: '当前季度到目前为止', label: '当前季度到目前为止' },
    { value: '当前半年', label: '当前半年' },
    { value: '当前半年到目前为止', label: '当前半年到目前为止' },
    { value: '本年', label: '本年' },
    { value: '本年到目前为止', label: '本年到目前为止' },
  ];
  const timeFilterStyle = ref<any>({
    border: '1px solid #305680',
    borderRadius: '5px',
    padding: ' 5px 10px 5px 10px',
    display: 'flex',
    justifyItems: 'center',
    alignItems: 'center',
    cursor: 'pointer',
    color: '#305680',
    letterSpacing: '2px',
    caretColor: 'transparent',
  });
  const inputNumberItem = ref<any>({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '22%',
    borderBottom: '1px solid #FFFFFF',
    backgroundColor: '#EDF0F4',
    borderTopRightRadius: '5px',
    borderTopLeftRadius: '5px',
  });
  const formItemStyle = ref<any>({
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    marginTop: '15px',
  });
  const dateTimePickerStyle = ref<any>({
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    flexDirection: 'column',
    marginTop: '15px',
  });
  const dateTimePickerItemStyle = ref<any>({
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: '10px',
    width: '100%',
  });
  const inputNumberBox = ref<any>({
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    marginTop: '-5px',
    width: '90%',
  });
  const switchStyle = ref<any>({
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    marginLeft: 'auto',
    color: '#9B9B9B',
    fontSize: '12px',
  });
  // 获取最后选项下拉选择数据
  function getFinalSelectList(value) {}
  // 天时分秒监听
  watch(
    () => [inputNumberList.value[1], inputNumberList.value[2], inputNumberList.value[3]],
    ([hourNVal, minuteNVal, secondNVal]) => {
      if (secondNVal.time === 60) {
        inputNumberList.value[3].time = 0;
        inputNumberList.value[2].time += 1;
      }
      if (minuteNVal.time === 60) {
        inputNumberList.value[2].time = 0;
        inputNumberList.value[1].time += 1;
      }
      if (hourNVal.time === 60) {
        inputNumberList.value[1].time = 0;
        inputNumberList.value[0].time += 1;
      }
    },
    {
      deep: true,
    },
  );
  // 更新点击事件
  function okClick() {
    //存储时间戳
    let finalSwitchSelectTimestamp = {
      startTimestamp: 0,
      endTimestamp: 0,
    };
    // switch选择转换为时间戳
    if (radioValue.value === 1 && switchFlag.value === false) {
      timeFilterValue.value = '最后' + finalSwitchSelectValue.value;
      const num = extractNumbers(finalSwitchSelectValue.value);
      const unit = removeNumbers(finalSwitchSelectValue.value);
      finalSwitchSelectTimestamp.endTimestamp = dayjs().valueOf();
      if (unit === '秒') {
        finalSwitchSelectTimestamp.startTimestamp = dayjs().valueOf() - parseInt(num[0]) * 1000;
      } else if (unit === '分钟') {
        finalSwitchSelectTimestamp.startTimestamp =
          dayjs().valueOf() - parseInt(num[0]) * 60 * 1000;
      } else {
        finalSwitchSelectTimestamp.startTimestamp =
          dayjs().valueOf() - parseInt(num[0]) * 60 * 60 * 1000;
      }
    }
    if (radioValue.value === 1 && switchFlag.value === true) {
      timeFilterValue.value =
        '最后' +
        inputNumberList.value[0].time +
        inputNumberList.value[0].title +
        inputNumberList.value[1].time +
        inputNumberList.value[1].title +
        inputNumberList.value[2].time +
        inputNumberList.value[2].title +
        inputNumberList.value[3].time +
        inputNumberList.value[3].title;
      const startTimestamp = dayjs()
        .subtract(inputNumberList.value[0].time, 'day')
        .subtract(inputNumberList.value[1].time, 'hour')
        .subtract(inputNumberList.value[2].time, 'minute')
        .subtract(inputNumberList.value[3].time, 'second')
        .valueOf();
      finalSwitchSelectTimestamp.startTimestamp = startTimestamp;
      finalSwitchSelectTimestamp.endTimestamp = dayjs().valueOf();
    }
    if (radioValue.value === 2) {
      if (startDate.value === undefined) {
        createMessage.error('还未选择开始日期');
        return;
      }
      if (startTime.value === undefined) {
        createMessage.error('还未选择开始时间');
        return;
      }
      if (endData.value === undefined) {
        createMessage.error('还未选择结束日期');
        return;
      }
      if (endTime.value === undefined) {
        createMessage.error('还未选择结束时间');
        return;
      }

      const startDateString = dayjs(startDate.value).format('YYYY-MM-DD');
      const startTimeString = dayjs(startTime.value).format('HH:mm:ss');
      const endDateString = dayjs(endData.value).format('YYYY-MM-DD');
      const endTimeString = dayjs(endTime.value).format('HH:mm:ss');
      let start = new Date(startDateString + ' ' + startTimeString);
      let end = new Date(endDateString + ' ' + endTimeString);
      // 比较两个日期
      if (start < end) {
        timeFilterValue.value =
          '从' +
          startDateString +
          ' ' +
          startTimeString +
          '到' +
          endDateString +
          ' ' +
          endTimeString;
        finalSwitchSelectTimestamp.startTimestamp = dayjs(start).valueOf();
        finalSwitchSelectTimestamp.endTimestamp = dayjs(end).valueOf();
      } else if (start > end) {
        createMessage.error('开始时间比结束时间晚');
        return;
      } else {
        createMessage.error('两个时间点相同');
        return;
      }
    }
    if (radioValue.value === 3) {
      timeFilterValue.value = intervalSwitchSelectValue.value;
    }
    emits('timeFilterValue', finalSwitchSelectTimestamp);
    closeModal();
  }
  // 获取数字
  function extractNumbers(input: string): number[] {
    // 使用正则表达式匹配所有的数字
    const matches = input.match(/\d+/g);

    if (matches) {
      // 将匹配到的数字字符串数组转换为数字数组
      return matches.map((str) => parseInt(str, 10));
    } else {
      // 如果没有找到任何数字，则返回空数组
      return [];
    }
  }
  // 获取单位
  function removeNumbers(input: string): string {
    // 使用正则表达式移除所有的数字（包括全角和半角）
    return input.replace(/[0-9\uFF10-\uFF19]/g, '');
  }
</script>

<style>
   {
  }
</style>
